<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :destroy-on-close="true"
    title="新增商户支付信息"
    width="650px"
    @close="emits('closeDialog')"
  >
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      :label-width="formLabelWidth"
      :rules="rules"
    >
      <el-form-item label="商户id" prop="merchant_id">
        <el-input v-model="dialogForm.merchant_id" />
      </el-form-item>
      <el-form-item label="支付通道id" prop="channel_id">
        <el-input v-model="dialogForm.channel_id" />
      </el-form-item>
      <el-form-item label="法币名称" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.currency" />
      </el-form-item>
      <el-form-item label="下游通道费率" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.fee_rate" type="number" />
      </el-form-item>
      <el-form-item label="下游单笔本币固定费用" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.fixed_fee" type="number" />
      </el-form-item>
      <el-form-item label="下游单笔美元固定费用" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.fixed_usd_fee" type="number" />
      </el-form-item>
      <el-form-item label="下游支付失败手续费" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.fail_fee" type="number" />
      </el-form-item>
      <el-form-item label="下游退款手续费" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.refund_fee" type="number" />
      </el-form-item>
      <el-form-item label="下游风控手续费" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.risk_fee" type="number" />
      </el-form-item>
      <el-form-item label="下游拒付手续费" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.refuse_fee" type="number" />
      </el-form-item>
      <el-form-item label="下游汇差费率" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.diff_rate" type="number" />
      </el-form-item>
      <el-form-item label="上游通道费率" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.cost_fee_rate" type="number" />
      </el-form-item>
      <el-form-item label="上游单笔本币固定费用" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.cost_fixed_fee" type="number" />
      </el-form-item>
      <el-form-item label="上游单笔美元固定费用" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.cost_fixed_usd_fee" type="number" />
      </el-form-item>
      <el-form-item label="上游支付失败手续费" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.cost_fail_fee" type="number" />
      </el-form-item>
      <el-form-item label="上游退款手续费" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.cost_refund_fee" type="number" />
      </el-form-item>
      <el-form-item label="上游风控手续费" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.cost_risk_fee" type="number" />
      </el-form-item>
      <el-form-item label="上游拒付手续费" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.cost_refuse_fee" type="number" />
      </el-form-item>
      <el-form-item label="上游汇差费率" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.cost_diff_rate" type="number" />
      </el-form-item>
      <el-form-item label="单笔最小金额" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.min_amount" type="number" />
      </el-form-item>
      <el-form-item label="单笔最大金额" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.max_amount" type="number" />
      </el-form-item>
      <el-form-item label="单日最大金额" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.daily_max_amount" type="number" />
      </el-form-item>
      <el-form-item label="入账天数" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.deposit_freeze_days" type="number" />
      </el-form-item>
      <el-form-item label="是否生效" prop="is_valid">
        <el-select v-model="dialogForm.is_valid" placeholder="是否生效">
          <el-option label="未生效" :value="0" />
          <el-option label="已生效" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否允许退款" prop="is_refund">
        <el-select v-model="dialogForm.is_refund" placeholder="是否允许退款">
          <el-option label="否" :value="0" />
          <el-option label="是" :value="1" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('cancel')">取消</el-button>
        <el-button
          type="primary"
          @click="submit(dialogForm)"
          :loading="btnLoading"
        >
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
const dialogFormRef = ref(null);

defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false,
  },
  dialogForm: {
    type: Object,
    default: {
      merchant_id: "",
      channel_id: "",
      currency: "",
      fee_rate: "",
      fixed_fee: "",
      fixed_usd_fee: "",
      fail_fee: "",
      refund_fee: "",
      risk_fee: "",
      refuse_fee: "",
      diff_rate: "",
      cost_fee_rate: "",
      cost_fixed_fee: "",
      cost_fixed_usd_fee: "",
      cost_fail_fee: "",
      cost_refund_fee: "",
      cost_risk_fee: "",
      cost_refuse_fee: "",
      cost_diff_rate: "",
      min_amount: "",
      max_amount: "",
      daily_max_amount: "",
      deposit_freeze_days: "",
      is_valid: "",
      is_refund: "",
    },
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "220px";
// 校验
const rules = {
  merchant_id: [{ required: true, message: "请输入商户id", trigger: "blur" }],
  fee_rate: [
    { required: true, message: "请输入支付通道手续费率", trigger: "blur" },
  ],
  channel_id: [
    { required: true, message: "请输入支付渠道id", trigger: "blur" },
  ],
  currency: [{ required: true, message: "请输入币种", trigger: "blur" }],
  fixed_fee: [
    { required: true, message: "请输入单笔手续费（美金）", trigger: "blur" },
  ],
  min_amount: [
    { required: true, message: "请输入单笔最小支付金额", trigger: "blur" },
  ],
  max_amount: [
    { required: true, message: "请输入单笔最大支付金额", trigger: "blur" },
  ],
  deposit_freeze_days: [
    { required: true, message: "请输入资金到账天数", trigger: "blur" },
  ],
};
// 提交
const submit = (dialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        const param = Object.assign({}, dialogForm);
        // param.is_active = param.is_deposit ? 1 : 0;
        emits("submitForm", param);
      } catch (error) {
        console.log(error);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>
